<template>
  <div v-loading="loading">
    <div class="video_title">
      <van-icon name="arrow-left" class="icon" @click="goBack" />
      <!-- <p>随堂考试</p> -->
      <p>
        <!-- <van-count-down
          :time="time"
          format="mm:ss"
          @change="timeChange"
          ref="time"
          style="color: #fff"
          @finish="finishTime"
        /> -->
        <span v-if="$route.query.video">本题剩余时间{{ Current.time }}秒</span>
      </p>
    </div>
    <v-touch @swipeleft="swiperleft" @swiperight="swiperright">
      <div
        style="
          padding: 0.75rem;
          background: #fff;
          height: calc(100vh - 94px);
          overflow: auto;
        "
      >
        <div class="titleBox">
          <span
            ><p>{{ qtype }}</p>
            {{ Current.stem }}
          </span>
        </div>
        <div
          style="
            line-height: 8.75rem;
            display: inline-block;
            height: 8.75rem;
            margin-bottom: 2.125rem;
          "
          v-if="Current.stem_img"
        >
          <img
            :src="Current.stem_img"
            @click="openImg([Current.stem_img])"
            style="height: 100%"
            alt=""
          />
        </div>
        <div style="margin-left: 5px">
          <van-checkbox-group
            v-model="checkList"
            v-if="qtype == '多选'"
            :disabled="disabled || Current.TimeOut"
            @change="danChange(Current)"
          >
            <div v-for="(item, index) in Current.tiList" :key="index">
              <van-checkbox v-if="item.content" :name="item.cred">
                <span style="padding: 6px 0; display: inline-block"
                  >{{ item.content
                  }}<img
                    v-if="item.content_img"
                    style="max-width: 100px; max-height: 100px"
                    :src="item.content_img"
                    alt=""
                /></span>
                <template #icon="props">
                  <template v-if="props.checked">
                    <img
                      class="img-icon"
                      v-if="!disabled"
                      :src="require(`@/assets/mobile/exam/${item.cred}-O.png`)"
                    />
                    <img
                      class="img-iconA"
                      v-else
                      :src="
                        errORpass
                          ? require(`@/assets/mobile/exam/pass.png`)
                          : require(`@/assets/mobile/exam/error.png`)
                      "
                    />
                  </template>
                  <template v-else>
                    <img
                      class="img-icon"
                      v-if="!disabled"
                      :src="require(`@/assets/mobile/exam/${item.cred}.png`)"
                    />
                    <img
                      :class="
                        daan && Current.answer == item.cred
                          ? 'img-iconA'
                          : 'img-icon'
                      "
                      v-else
                      :src="
                        daan && Current.answer == item.cred
                          ? require(`@/assets/mobile/exam/pass.png`)
                          : require(`@/assets/mobile/exam/${item.cred}.png`)
                      "
                    />
                  </template>
                </template>
              </van-checkbox>
            </div>
          </van-checkbox-group>
          <van-radio-group
            v-model="daan"
            v-if="qtype == '单选'"
            @change="danChange(Current)"
            :disabled="disabled || Current.TimeOut"
          >
            <!--  -->
            <div v-for="(item, index) in Current.tiList" :key="index">
              <van-radio v-if="item.content" :name="item.cred">
                <span style="padding: 6px 0; display: inline-block"
                  >{{ item.content
                  }}<img
                    v-if="item.content_img"
                    style="max-width: 100px; max-height: 100px"
                    :src="item.content_img"
                    alt=""
                /></span>
                <template #icon="props">
                  <template v-if="props.checked">
                    <img
                      class="img-icon"
                      v-if="!disabled"
                      :src="require(`@/assets/mobile/exam/${item.cred}-O.png`)"
                    />
                    <img
                      class="img-iconA"
                      v-else
                      :src="
                        errORpass
                          ? require(`@/assets/mobile/exam/pass.png`)
                          : require(`@/assets/mobile/exam/error.png`)
                      "
                    />
                  </template>
                  <template v-else>
                    <img
                      class="img-icon"
                      v-if="!disabled"
                      :src="require(`@/assets/mobile/exam/${item.cred}.png`)"
                    />
                    <img
                      :class="
                        daan && Current.answer == item.cred
                          ? 'img-iconA'
                          : 'img-icon'
                      "
                      v-else
                      :src="
                        daan && Current.answer == item.cred
                          ? require(`@/assets/mobile/exam/pass.png`)
                          : require(`@/assets/mobile/exam/${item.cred}.png`)
                      "
                    />
                  </template>
                </template>
              </van-radio>
            </div>
          </van-radio-group>
          <van-radio-group
            v-model="daan"
            v-if="qtype == '判断'"
            @change="danChange(Current)"
            :disabled="disabled || Current.TimeOut"
          >
            <template v-if="!disabled">
              <van-radio name="正确" class="pd"> 正确 </van-radio>
              <van-radio name="错误" class="pd"> 错误 </van-radio>
            </template>
            <template v-else>
              <van-radio name="正确" class="pd">
                正确
                <template #icon="props">
                  <template v-if="props.checked">
                    <img
                      class="img-iconA"
                      :src="
                        errORpass
                          ? require(`@/assets/mobile/exam/pass.png`)
                          : require(`@/assets/mobile/exam/error.png`)
                      "
                    />
                  </template>
                  <template v-else>
                    <img
                      :class="'img-iconA'"
                      :src="
                        daan && Current.answer == '正确'
                          ? require(`@/assets/mobile/exam/pass.png`)
                          : require(`@/assets/mobile/exam/PD.png`)
                      "
                    />
                  </template>
                </template>
              </van-radio>
              <van-radio name="错误" class="pd">
                错误
                <template #icon="props">
                  <template v-if="props && props.checked">
                    <img
                      class="img-iconA"
                      :src="
                        errORpass
                          ? require(`@/assets/mobile/exam/pass.png`)
                          : require(`@/assets/mobile/exam/error.png`)
                      "
                    />
                  </template>
                  <template v-else>
                    <img
                      :class="'img-iconA'"
                      :src="
                        daan && Current.answer == '错误'
                          ? require(`@/assets/mobile/exam/pass.png`)
                          : require(`@/assets/mobile/exam/PD.png`)
                      "
                    />
                  </template>
                </template>
              </van-radio>
            </template>
          </van-radio-group>
        </div>
        <div class="button_box">
          <!-- <van-button
            round
            type="info"
            @click="changeClick('add')"
            v-if="downdisabled"
            >确定</van-button
          > -->
          <van-button
            round
            type="info"
            @click="changeClick('end')"
            v-if="enddisabled"
            >上一题</van-button
          >
          <!-- {{num}} -->
          <van-button
            round
            type="info"
            @click="changeClick('add')"
            v-if="downdisabled"
            >下一题</van-button
          >
        </div>
        <div class="daan_box" v-if="isDaAn">
          <span>答案:{{ Current.answer }}</span>
          <p v-if="Current.analysis">解析:{{ Current.analysis }}</p>
        </div>
      </div>
    </v-touch>
    <div class="foot_box">
      <div
        @click="
          () => {
            this.show = !this.show;
          }
        "
      >
        <van-icon name="qr" />
        <span>{{ TIXU }}/{{ Ti.length }}</span>
      </div>
      <!-- <div @click="CollectionClick(DQTI)" v-if="(!titleName||titleName=='模拟考试')&&!this.usererror">
                <van-icon name="star" v-if="isYes"/>
                <van-icon name="star-o" v-else/>
                <span>{{isYes?'取消收藏':'收藏'}}</span>
            </div> -->
      <div>
        <van-button
          round
          type="warning"
          size="small"
          @click="commit"
          v-if="jjtc"
          >交卷</van-button
        >
        <van-button round type="danger" size="small" @click="goBack" v-else
          >退出</van-button
        >
      </div>
    </div>
    <van-action-sheet v-model="show" title="" :closeable="false">
      <div
        style="
          width: 100%;
          height: 3.19rem;
          display: flex;
          align-items: center;
          justify-content: space-around;
        "
        v-if="!disabled"
      >
        <div class="tICade">
          <div class="TIClass" style="background: #fff"></div>
          <span>未答</span>
        </div>
        <div class="tICade">
          <div class="TIClass" style="background: #7ed321"></div>
          <span>已答</span>
        </div>
        <div class="tICade">
          <div class="TIClass" style="background: #175dff"></div>
          <span>当前</span>
        </div>
      </div>
      <div
        style="
          width: 100%;
          height: 3.19rem;
          display: flex;
          align-items: center;
          justify-content: space-around;
        "
        v-else
      >
        <div class="tICade">
          <div class="TIClass" style="background: #fff"></div>
          <span>未答</span>
        </div>
        <div class="tICade">
          <div class="TIClass" style="background: #7ed321"></div>
          <span>正确</span>
        </div>
        <div class="tICade">
          <div class="TIClass" style="background: #f33e34"></div>
          <span>错误</span>
        </div>
      </div>
      <div class="content">
        <van-row>
          <van-col span="4" v-for="item in Ti" :key="item.name">
            <div class="XH_box" :style="item.type" @click="changeTi(item)">
              {{ item.name }}
            </div>
          </van-col>
        </van-row>
      </div>
    </van-action-sheet>
    <!-- <van-dialog v-model="dialogVisible" title="我的成绩" show-cancel-button>
            
        </van-dialog> -->
  </div>
</template>

<script>
import {
  exerAdd,
  exerCollect,
  exerdelCollect,
  videoPracticeDone,
  examAdd,
  mockcollect,
  mockcancelcollect,
  resetwrong,
} from "@/api/admin.js";
import { ImagePreview } from "vant";
import { getTi, delTi, getExectSetting } from "@/utils/auth.js";
export default {
  data() {
    return {
      dateTime: "",
      enddisabled: false,
      titleName: this.$route.query.titleName,
      usererror: this.$route.query.usererror, //首页错题集进来的
      show: false,
      radio: "1",
      DQTI: {},
      Ti: [], //所有试题
      TIXU: 1,
      Tistyle: {
        background: "#fff",
        color: "#666",
      }, //未答题样式
      DQTistyle: {
        background: "#175DFF",
        color: "#FFF",
      }, //当前题样式
      YDTistyle: {
        background: "#7ED321",
        color: "#FFF",
      }, //已答题题样式
      DCTistyle: {
        background: "#F33E34",
        color: "#FFF",
      }, //答错题样式
      DDTistyle: {
        background: "#7ED321",
        color: "#FFF",
      }, //答对题样式
      daan: "",
      checkList: [], //多选的vuelue
      Current: {
        mame: "1",
        stem: "",
        tiList: [],
        answer: "",
        analysis: "",
        id: "",
      },
      commitData: [],
      downdisabled: true,
      isDaAn: this.$route.query.daan == "显示",
      Collectionlist: [],
      isYes: false, //默认不收藏
      jjtc: true,
      subjectid: this.$route.query.subjectid, //专业id
      exerid: this.$route.query.exerid,
      quizid: this.$route.query.quizid, //试卷id  唯一
      //模拟考试 正式考试
      getExectSettingData: JSON.parse(this.$route.query.setting),
      gz: this.$route.query.gz,
      time: Number(JSON.parse(getExectSetting()).考试时长.时长) * 60 * 1000,
      NowTime: 0,
      dialogVisible: true,
      correct: 0, //正确题数
      error: 0, //错误题数
      Unanswered: 0, //未答题数
      fraction: 0, //最终得分
      isjiaojuan: true, //如果已经交卷  则为fales
      loading: false,
      disabled: false, //复卷时禁用答题功能

      examid: this.$route.query.examid, //正式考试 试卷id  唯一
      errORpass: true, //当前题 答案正确还是错误
    };
  },
  methods: {
    openImg(img) {
      ImagePreview(img);
    },
    goBack() {
      this.$router.go(-1);
    },
    //样式切换
    styleChange(val) {
      this.styleMap();
      this.Ti.map((item) => {
        if (Number(item.name) == val) {
          item.type = this.DQTistyle;
          this.DQTI = item;
          this.funChangeTi(item);
        }
      });
    },
    //点击题号切换试题
    changeTi(item) {
      this.show = false;
      this.DQTI = item;
      this.TIXU = item.name;
      this.funChangeTi(item);
      this.changeClick();
      if (this.TIXU < this.Ti.length) {
        this.downdisabled = true;
      } else {
        this.downdisabled = false;
      }
      this.$forceUpdate();
    },
    swiperleft() {
      this.num++;
      // this.changeClick('add')
    },
    swiperright() {
      this.num--;
    },
    //按钮切换试题
    changeClick(data) {
      this.downdisabled = true;
      this.enddisabled = true;
      if (this.downdisabled && data == "add") {
        this.TIXU = Number(this.DQTI.name) + 1;
      }
      if (this.downdisabled && data == "end") {
        this.TIXU = Number(this.DQTI.name) - 1;
      }
      if (this.Ti.length <= Number(this.TIXU)) {
        this.downdisabled = false;
      }
      if (Number(this.TIXU) <= 1) {
        this.enddisabled = false;
      }
      this.$forceUpdate();
    },
    //试题信息  切换试题时  触发此函数
    funChangeTi(item) {
      clearInterval(this.outtime);
      let Arr = [];
      Arr.push(
        {
          cred: "A",
          content: item.a,
          content_img: item.a_img,
        },
        {
          cred: "B",
          content: item.b,
          content_img: item.b_img,
        },
        {
          cred: "C",
          content: item.c,
          content_img: item.c_img,
        },
        {
          cred: "D",
          content: item.d,
          content_img: item.d_img,
        },
        {
          cred: "E",
          content: item.e,
          content_img: item.e_img,
        },
        {
          cred: "F",
          content: item.f,
          content_img: item.f_img,
        }
      );
      this.Current = {
        TimeOut: item.TimeOut,
        time: item.time,
        name: item.name,
        stem: item.stem,
        tiList: Arr,
        answer: item.answer,
        analysis: item.analysis,
        id: item.id,
        qtype: item.qtype,
        stem_img: item.stem_img,
      };
      if (!item.TimeOut) {
        this.outtime = setInterval(() => {
          if (this.Current.time <= 0 || this.disabled) {
            this.Current.TimeOut = true;
            item.TimeOut = true;
            clearInterval(this.outtime);
            this.$forceUpdate();
            // if (!this.downdisabled) {
            //   this.changeClick("add");
            // }
          } else {
            this.Current.time--;
            item.time = this.Current.time;
          }
        }, 1000);
      }
      //每次切换试题都要重新填写用户相对应的答案
      this.daan = "";
      this.checkList = [];
      this.commitData.map((ite) => {
        if (ite.questionid == item.id) {
          this.daan = ite.uanswer;
          this.checkList = ite.uanswer.split("");
        }
      });
      this.isYes = false;
      this.Collectionlist.map((itemA) => {
        if (itemA.questionid == item.id) {
          this.isYes = true;
        }
      });
      if (this.disabled) {
        this.daanStyle(item);
      }
    },
    danChange(data) {
      if (this.qtype == "多选") {
        this.daan = JSON.parse(JSON.stringify(this.checkList)).sort().join("");
      }
      let scored; //是否正确   对 1 错 0
      if (data.answer == this.daan) {
        scored = 1;
      } else {
        scored = 0;
      }
      var isyes = false;
      this.commitData.map((item) => {
        if (this.commitData.length == 0 || item.questionid == data.id) {
          isyes = true;
          item.uanswer = this.daan;
          item.scored = scored;
          item.qtype = data.qtype;
        }
      });
      if (!isyes && this.daan) {
        this.commitData.push({
          questionid: data.id,
          uanswer: this.daan,
          scored,
          qtype: data.qtype,
        });
      }
    },
    //收藏 取消收藏
    CollectionClick(data) {
      var isyes = false;
      this.isYes = !this.isYes;
      this.Collectionlist.map((item, index) => {
        if (this.Collectionlist.length == 0 || item.questionid == data.id) {
          isyes = true;
          delete this.Collectionlist[index];
          if (!this.titleName) {
            exerdelCollect({
              subjectid: this.subjectid,
              questionid: data.id,
            }).then((res) => {
              if (res.code == 200) {
                this.$toast.success("取消成功");
              } else {
                this.$toast.fail(res.msg);
              }
            });
          } else if (this.titleName == "模拟考试") {
            mockcancelcollect({
              subjectid: this.subjectid,
              questionid: data.id,
            }).then((res) => {
              if (res.code == 200) {
                this.$toast.success("取消成功");
              } else {
                this.$toast.fail(res.msg);
              }
            });
          }
        }
      });
      if (!isyes) {
        this.Collectionlist.push({ questionid: data.id, isYes: true });
        if (!this.titleName) {
          exerCollect({ subjectid: this.subjectid, questionid: data.id }).then(
            (res) => {
              if (res.code == 200) {
                this.$toast.success("收藏成功");
              } else {
                this.$toast.fail(res.msg);
              }
            }
          );
        } else if (this.titleName == "模拟考试") {
          mockcollect({ subjectid: this.subjectid, questionid: data.id }).then(
            (res) => {
              if (res.code == 200) {
                this.$toast.success("收藏成功");
              } else {
                this.$toast.fail(res.msg);
              }
            }
          );
        }
      }
    },
    //提交
    commit() {
      let msg = "";
      if (this.commitData.length < this.Ti.length) {
        msg = "您还没有做完，确定要交卷吗";
      } else {
        msg = "确定要交卷吗";
      }
      this.$dialog
        .confirm({
          title: "提示",
          message: msg,
          showCancelButton: true,
        })
        .then(() => {
          let date = new Date();
          let endTime = date.getTime();

          var userTime = (endTime - this.dateTime) / 1000;

          this.correct = 0;
          this.error = 0;
          let Dfen = 0; //单选做对题数
          let Pfen = 0; //判断做对题数
          let Mfen = 0; //多选做对题数
          // this.$refs.time.pause();

          this.commitData.map((item) => {
            if (Boolean(item.scored)) {
              this.correct++;
              if (item.uanswer == "正确" || item.uanswer == "错误") {
                Pfen++;
              } else if (item.uanswer.length > 1) {
                Mfen++;
              } else {
                Dfen++;
              }
            } else {
              this.error++;
            }
          });
          let Dfens = 0;
          let Mfens = 0;
          let Pfens = 0;
          Dfens = Dfen * this.getExectSettingData.per_point; //单选得分
          Mfens = Mfen * this.getExectSettingData.per_point; //多选得分
          Pfens = Pfen * this.getExectSettingData.per_point; //判断得分
          // this.fraction = Dfens + Mfens + Pfens; //总分
          this.Unanswered = this.Ti.length - this.commitData.length; //未作题
          this.$forceUpdate();
          if (true) {
            // if (this.commitData.length > 0) {
            this.loading = true;
            this.isjiaojuan = false;
            let obj = {
              quizid: this.quizid,
              gz: this.gz,
            };

            // this.$router.push({
            //   path: "/result",
            //   query: {
            //     Unanswered: this.Unanswered,
            //     correct: this.correct,
            //     error: this.error,
            //     fraction: this.fraction,
            //     commitData: JSON.stringify(this.commitData),
            //     titleName: this.titleName,
            //   },
            // });

            videoPracticeDone(obj, {
              quizlog: JSON.stringify(this.commitData),
              use_time: userTime,
            }).then((res) => {
              this.loading = false;
              if (res.code == 200) {
                if (res.msg == "次数已尽") {
                  this.$toast.fail("您的考试次数已用尽,请重新学习");
                }
                this.fraction = res.data.score;
                this.$router.replace({
                  path: "/resultVideo",
                  query: {
                    Unanswered: this.Unanswered,
                    correct: this.correct,
                    error: this.error,
                    fraction: this.fraction,
                    commitData: JSON.stringify(this.commitData),
                    titleName: this.titleName,
                  },
                });
              }
            });
          } else {
            this.isjiaojuan = false;
            this.$router.replace({
              path: "/resultVideo",
              query: {
                Unanswered: this.Unanswered,
                correct: this.correct,
                error: this.error,
                fraction: this.fraction,
                commitData: JSON.stringify(this.commitData),
                titleName: this.titleName,
                usererror: this.usererror,
              },
            });
          }
        });
    },

    //模拟考试

    //时间
    timeChange(val) {
      this.NowTime =
        Number(JSON.parse(getExectSetting()).考试时长.时长) * 60 -
        val.hours * 3600 -
        val.minutes * 60 -
        val.seconds;
    },
    //时间结束
    finishTime() {
      //时间结束  自动交卷
      this.ApiJJ();
    },
    //交卷接口  模拟考试
    ApiJJ() {
      this.$refs.time.pause();
      let obj = {
        quizid: this.quizid,
        gz: this.gz,
      };
      if (this.commitData.length > 0) {
        videoPracticeDone(obj, {
          quizlog: JSON.stringify(this.commitData),
          use_time: this.NowTime,
        }).then((res) => {});
      }
    },
    //复卷
    rewinding() {
      this.disabled = true;
      this.isDaAn = true;
      this.isjiaojuan = false;
      this.jjtc = false;
      // this.styleMap()
    },
    //答案展示样式
    daanStyle(val) {
      this.commitData.map((item) => {
        if (item.questionid == val.id && item.uanswer) {
          this.errORpass = Boolean(item.scored);
        }
      });
    },
    //默认样式改变
    styleMap() {
      this.Ti.map((item) => {
        item.type = this.Tistyle;
        this.commitData.map((element) => {
          if (item.id == element.questionid) {
            if (!this.disabled) {
              item.type = this.YDTistyle;
            } else {
              if (item.id == element.questionid) {
                if (Boolean(element.scored)) {
                  item.type = this.DDTistyle;
                } else {
                  item.type = this.DCTistyle;
                }
              } else {
                item.type = this.DQTistyle;
              }
            }
          }
        });
      });
    },
  },
  watch: {
    TIXU(val) {
      this.styleChange(val);
    },
  },
  computed: {
    // ...mapGetters(['Ti']),//所有试题
    qtype: function () {
      return this.Current.qtype;
    },
  },
  created() {
    let NowTime = new Date();
    this.dateTime = NowTime.getTime();
    this.Ti = getTi();
    // console.log(getExectSetting(),'2333');

    this.Ti.map((item, index) => {
      item.time = this.getExectSettingData.per_time;
      item.TimeOut = false;
      item.name = index + 1; //加入题序
      if (item.uanswer) {
        this.commitData.push({
          questionid: item.id,
          uanswer: item.uanswer,
          scored: item.scored,
        });
        this.TIXU = item.name;
      }
    });
    let TI = JSON.parse(JSON.stringify(this.Ti));
    if (this.$route.query.commitData) {
      this.commitData = JSON.parse(this.$route.query.commitData);
      this.rewinding();
      this.daanStyle(this.Ti[0]);
      if (this.$route.query.error) {
        this.Ti = [];
        this.commitData
          .filter((item) => {
            return !Boolean(item.scored);
          })
          .map((item, index) => {
            TI.map((it) => {
              if (it.id == item.questionid) {
                it.name = index + 1; //加入题序
                this.Ti.push(it);
              }
            });
          });
      }
    }
    this.styleChange(this.Ti[0].name);
  },
  beforeDestroy() {
    if (this.jjtc && this.isjiaojuan) {
      this.ApiJJ();
    }
  },
};
</script>

<style lang="scss" scoped>
//   '\e6a7'  叉号  '\e728'  对号
.video_title {
  display: flex;
  align-items: center;
  // padding: 0 12px;
  background: #327bff;
  color: #fff;
  height: 2.75rem;

  p {
    margin: 0;
    width: calc(100vw - 40px);
    display: flex;
    justify-content: center;
  }
  .icon {
    font-size: 1.25rem;
  }
}
::v-deep {
  .van-checkbox {
    min-height: 3.2rem;
  }
  .van-radio {
    min-height: 3.2rem;
  }
  .pd {
    display: flex;
    align-items: center;
    .van-radio__icon {
      display: flex;
      align-items: center;
    }
  }
  .van-radio__icon {
    min-height: 2.25rem;
  }
  .van-radio__label {
    font-size: 1rem;
  }
  .van-checkbox__icon {
    min-height: 2.25rem;
  }
  .van-checkbox__label {
    font-size: 1rem;
  }
  .van-radio__label--disabled {
    color: #323233;
  }
  .van-row {
    width: 100%;
  }
  .van-button--small {
    height: auto;
    padding: 0.35rem 0.75rem;
  }
  .van-icon-star:before {
    color: #ff9904;
  }
  // .van-checkbox__icon--checked{
  //     .van-icon-success{
  //         background: #fff;
  //         color:#1989fa;
  //     }
  //     .van-icon-success:before{
  //         content:'';
  //         // width: 5px;
  //         // height: 5px;
  //         // background: #fff;
  //     }
  // }
}
.titleBox {
  margin-bottom: 2.125rem;
  span {
    p {
      margin: 0;
      font-size: 0.75rem;
      color: #fff;
      background: #327bff;
      border-top-left-radius: 0.69rem;
      border-bottom-left-radius: 0.69rem;
      border-top-right-radius: 0.69rem;
      margin-right: 0.63rem;
      height: 1.19rem;
      width: 2.64rem;
      text-align: center;
      // display: inline-block;
      float: left;
    }
    font-size: 1.2rem;
  }
}
.button_box {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-around;
  .van-button--normal {
    padding: 0 3.09rem;
  }
}
.foot_box {
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  height: 50px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.9rem;
}
.img-icon {
  height: 2.25rem;
  width: 2.25rem;
}
.img-iconA {
  height: 1.8rem;
  width: 1.8rem;
  margin: 0 0.2rem;
}
.content {
  padding: 12px;
  height: 24.6rem;
  display: flex;
  .XH_box {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #ddd;
    border-radius: 50%;
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .van-col {
    margin-bottom: 0.94rem;
  }
}
.tICade {
  display: flex;
  align-items: center;
}
.TIClass {
  // justify-content: space-around;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 4px;
  border-radius: 50%;
  border: 1px solid #eee;
}
.daan_box {
  margin-top: 8px;
  padding: 1rem 1.75rem;
  background: #eeeeee;
  font-size: 1rem;
  p {
    margin: 0;
  }
}
</style>